
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router"
import HomeView from "@/views/HomeView.vue"
// 1、创建路由模块  用createRouter
// 2、设置路由模式  createWebHistory      ,createWebHashHistory 
const router = createRouter({
    history:createWebHistory(), //history模式
    // history:createWebHashHistory(),//hash模式
    routes:[
        {
            path:'/',
            redirect:'/home'
        },
        {
            path:'/home',
            // 路由别名
            alias:['/root','/api'],
            name:'home',
            component:HomeView,
            children:[
                {
                    path:'goodssort',
                    name:'goodssort',
                    component:()=>import('@/views/home/GoodsSort.vue')
                },
                {
                    path:'goodshot',
                    name:'goodshot',
                    component:()=>import('@/views/home/GoodsHot.vue')

                }
            ],
            // 路由元信息
            meta:{
                title:'首页'
            }
        },
        {
            path:'/about',
            name:'about',
            // 路由懒加载
            // component:()=>import('@/views/AboutView.vue')
            // 命名视图配置多个组件
            components:{
                default:()=>import('@/views/AboutView.vue'),
                hhh:()=>import('@/views/HeadView.vue'),
                fff:()=>import('@/views/FootView.vue')
            },
            meta:{
                title:'关于'
            },
            // 路由独享守卫   做权限认证
            beforeEnter (to, from, next) {
                // ..
                console.log('路由独享守卫')
                next()
            }
        },
        {
            path:'/cars/:count',
            name:'cars',
            component:()=>import('@/views/CarsView.vue'),
            meta:{
                title:'购物车'
            }
        }
    ]
})
// 路由守卫  三种：
// 1、全局路由   路由全局前置  后置守卫
// 2、组件内路由守卫  
// 3、路由内独享

// 配置路由元信息的类型  否则它是unknown类型
declare module 'vue-router' {
    interface RouteMeta {
      title: string
    }
  }


// router.beforeEach((to,from,next)=>{
//     // 路由全局前置守卫   使用场景：权限认证
//     console.log('路由全局前置守卫')
//     console.log(from)
//     console.log(to)

//     window.document.title = to.meta.title
//     next()
    
// })

// 全局路由的后置守卫
// router.afterEach((to,from)=>{
//     // 路由后置全局守卫  loadingbar  进度条
//     console.log('路由后置全局守卫')
// })



// 白名单  存放的有权限的路由
let whitelist = ['/about','/profile']
// 案例 ：进行权限认证
// router.beforeEach((to,from,next)=>{
//     let token = localStorage.getItem('token')
//     // 白名单里有  并且 登陆过有token信息 才可以进行；路由跳转
//     if(whitelist.includes(to.path) && token){
//         next()
//     }else{
//         // 跳转到到登陆页面
//         next('/login')
//     } 
// })

export default router